<template>
  <div class="box">
    <van-nav-bar
      title="你每天的“状态”，原来是体内这两..."
      left-arrow
      @click="back"
    />
    <van-pull-refresh v-model="state.loading" @refresh="onRefresh">
      <p class="new">最新</p>
      <div class="list">
        <div class="list1" v-for="(item, index) in state1.list" :key="index">
          <div class="top">
            <div class="tou"><img :src="item.head" alt="" /></div>
            <div class="name">
              <p>{{ item.name }}</p>
              <span>{{ item.time }}</span>
            </div>
            <div class="zan">
              <img src="../../public/sppl-2.png" alt="" />
            </div>
          </div>
          <div class="bot">
            <p>{{ item.text }}</p>
          </div>
        </div>
      </div>
    </van-pull-refresh>
    <div class="footer">
      <div class="footer1">
        <input
          type="text"
          placeholder="留下自己的观点"
          v-model="textvalue"
          @keydown.enter="send"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { postEditChaXunApi } from "../utils/loginapi";
export default {
  setup() {
    const router = useRouter();
    const textvalue = ref("");
    const token = localStorage.getItem("token");
    const back = () => {
      router.go(-1);
    };
    const text = "";
    const name1 = ref("");
    const head1 = ref("");
    const state1 = reactive({
      list: [
        {
          head: require("../../public/faxian/亲子头像.png"),
          name: "天线宝宝",
          time: "07.09 22.35",
          text: "原来是这样昂。。。",
        },
        {
          head: require("../../public/faxian/图层 5.png"),
          name: "热心市民熊先生",
          time: "07.09 21.31",
          text: "涨知识了",
        },
      ],
    });
    const state = reactive({
      loading: false,
    });
    const onRefresh = () => {
      setTimeout(() => {
        state.loading = false;
      }, 1000);
    };
    let Data = {
      head: "",
      name: "",
      time: "",
      text: "",
    };
    const getData = () => {
      Data.head = head1.value;
      Data.name = name1.value;
      Data.time =
        "0" +
        (new Date().getMonth() + 1 + ".") +
        new Date().getDate() +
        " " +
        new Date().getHours() +
        ":" +
        new Date().getMinutes();
      Data.text = textvalue.value;
    };
    const send = () => {
      if (textvalue.value != "") {
        getData();
        state1.list.unshift({ ...Data });
        textvalue.value = "";
      }
    };
    onBeforeMount(() => {
      postEditChaXunApi({ usertel: token }).then((res) => {
        head1.value = res.data.userimg;
        name1.value = res.data.username;
      });
    });
    return {
      state,
      onRefresh,
      textvalue,
      state1,
      send,
      Data,
      getData,
      text,
      router,
      back,
      token,
      name1,
      head1,
    };
  },
};
</script>

<style lang="less" scoped>
.box {
  background: #fff;
  .van-nav-bar {
    /deep/.van-ellipsis {
      font-size: 17px;
      color: #505050;
    }
    /deep/.van-icon {
      font-size: 18.5px;
      color: #505050;
    }
  }
  .van-pull-refresh {
    .van-pull-refresh__track {
      .new {
        height: 32px;
        background: #eeecee;
        font-size: 16px;
        line-height: 32px;
        color: #b1b1b1;
        padding-left: 13px;
      }
    }
    .list {
      height: 500px;
      .list1 {
        padding: 13px;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #b1b1b1;
        .top {
          position: relative;
          display: flex;
          .tou {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            overflow: hidden;
            img {
              display: inline-block;
              width: 100%;
              height: 100%;
            }
          }
          .name {
            font-size: 14px;
            margin-left: 10px;
            p {
              line-height: 25px;
              height: 25px;
            }
            span {
              font-size: 12px;
              color: #b1b1b1;
            }
          }
          .zan {
            position: absolute;
            right: 20px;
            top: 0;
          }
        }
        .bot {
          p {
            font-size: 12px;
            color: #040404;
            margin-left: 35px;
            height: 30px;
            line-height: 30px;
            margin-top: 10px;
          }
        }
      }
    }
  }
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 52px;
    background: #e8e7e7;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .footer1 {
      width: 350px;
      height: 34px;
      border-radius: 17px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      input {
        border: none;
        font-size: 12px;
        color: #9c9c9c;
        width: 300px;
        height: 30px;
      }
    }
  }
}
</style>
